<template>
  <el-card>
    <template #header>商品列表</template>
    <div>
      <el-button
        type="danger"
        size="mini"
        class="del-more"
        @click="handleDelete(false)"
        >批量删除</el-button
      >
      <el-table :data="goods" yle="width: 100%">
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column prop="id" label="商品ID" width="80px">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="100px">
        </el-table-column>

        <el-table-column label="商品图片" width="100px">
          <template v-slot="{ row }">
            <img :src="row.img_url" alt="图片正在加载" />
          </template>
        </el-table-column>

        <el-table-column prop="category_name" label="商品分类" width="100px">
        </el-table-column>

        <el-table-column prop="price" label="商品价格" width="100px">
        </el-table-column>

        <el-table-column prop="create_time" label="创建日期" width="180px">
        </el-table-column>

        <el-table-column prop="sales_volume" label="商品销量" width="100px">
        </el-table-column>

        <el-table-column prop="evaluate_num" label="商品库存" width="100px">
        </el-table-column>

        <el-table-column prop="describe" label="商品描述" width="180px">
        </el-table-column>

        <el-table-column label="操作" width="180px">
          <template v-slot="{ row }">
            <!-- @click="$route.push('/goods/goodsedit?id=' + row.id)" -->
            <!-- `/goods/goodsedit/${row.id}` 有三条斜线，那么在 router 里的 index.js 里也需要三条斜线 -->
            <el-button
              size="mini"
              type="primary"
              @click="$router.push(`/goods/goodsedit/${row.id}`)"
            >
              编辑
            </el-button>

            <el-button size="mini" type="danger" @click="handleDelete(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { goodsList, goodsDel } from '@/api/goods.js'
export default {
  data() {
    return {
      goods: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      const users = JSON.parse(localStorage.getItem('users') || '{}')
      const { data, count } = await goodsList({
        member_id: users.member_id,
        access_token: users.access_token,
        page: this.currentPage,
        limit: this.pageSize
      })
      this.goods = data
      this.total = count
    },
    handleDelete(id) {
      let ids = ''
      if (id) {
        // 单项删除
        ids = id
      } else {
        // 批量删除
        // filter - 过滤器，会把满足条件的每一项返回
        // map - 会把满足条件的每一项的指定内容返回
        const arr = this.multipleSelection.map((item) => item.id)
        // console.log(arr,1)
        ids = arr.join()
      }

      // 如果当前的列表没有任何数据了，直接改变页码
      if (this.tableData.length <= 1) {
        this.currentPage--
      }

      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
          // 当用户点击确定删除的时候，需要发请求
          // 获取本地数据的 token 和 member_id
          const users = JSON.parse(localStorage.getItem('users') || '{}')
          const { code, msg } = await goodsDel({
            member_id: users.member_id,
            access_token: users.access_token,
            ids: ids
          })
          if (code === 1) {
            this.$message.success(msg)
            this.getUserList()
          } else {
            this.$message.error(msg)
          }
          // console.log(data)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    batchDel() {},
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getGoodsList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  img {
    width: 60px;
  }
}
</style>
